<template>
  <div>
    <el-dialog title="持仓流水" :visible.sync="dialogVisible" width="60%">
      <el-table v-loading="listLoading" :data="list" element-loading-text="Loading" border fit highlight-current-row>
        <el-table-column align="center" label="序号" width="95">
          <template slot-scope="scope">
            {{ scope.$index }}
          </template>
        </el-table-column>
        <el-table-column label="订单号" align="center">
          <template slot-scope="scope">

            {{ scope.row.orderNo }}
          </template>
        </el-table-column>
        <el-table-column label="产品名称" align="center">
          <template slot-scope="scope">
            {{ scope.row.product.name }}
          </template>
        </el-table-column>
        <el-table-column label="产品id" align="center" prop="productId" />

        <el-table-column label="投资金额" align="center" prop="investAmount" />
        <el-table-column label="收益金额" align="center" prop="totalAmount" />

        <el-table-column label="状态	" align="center" prop="status">
          <template slot-scope="scope">
            {{ setStateTxt(scope.row.status) }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间		" align="center" prop="createTime" />
        <!-- <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="text" @click="handleShowInfo(scope.row)">查看产品</el-button>

          </template>
        </el-table-column> -->
      </el-table>
      <div class="pagination">
        <el-pagination
          :current-page.sync="queryParams.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size.sync="queryParams.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="fetchData"
          @current-change="fetchData"
        />
      </div>
    </el-dialog>
    <product ref="product" />
  </div>
</template>
<script>
import { userProductList } from '@/api/table'
import product from './product.vue'
export default {
  components: {
    product
  },
  data() {
    return {
      dialogVisible: false,
      listLoading: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userId: ''
      },
      list: [],
      record: {}

    }
  },
  created() {

  },
  methods: {

    async show(record) {
      this.dialogVisible = true
      this.record = record
      this.fetchData()
    },
    async fetchData() {
      this.queryParams.userId = this.record.id
      const response = await userProductList(this.queryParams)
      this.list = response.data.records
      this.listLoading = false
      this.total = response.data.total
    },
    handleShowInfo(e) {
      this.$refs.product.show(e.product)
    },
    setResionTxt(index) {
      let str = ''
      switch (index) {
        case 'withdrawal':
          str = '提现'
          break
        case 'recharge':
          str = '充值'
          break
        case 'transfer' :
          str = '转账'
          break
        case 'commission':
          str = '手续费'
          break
        case 'investEarnings':
          str = '收益'
          break
        case 'invest' :
          str = '理财'
          break
        case 'invest_earnings':
          str = '投资返利'
          break
        case 'receive_transfer' :
          str = '收到转账'
          break
      }
      return str
    },
    setStateTxt(index) {
      let str = ''
      switch (index) {
        case 'progressing':
          str = '进行中'
          break
        case 'end':
          str = '已结束'
          break
      }
      return str
    }

  }
}
</script>
<style scoped lang="scss">
.el-tag+.el-tag {
  margin-left: 10px;
}

.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}

.list {
  .item {
    border: 1px solid #c0ccda;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-top: 10px;

    >div {
      display: flex;

      img {
        margin-right: 15px;
      }
    }

    >i {
      font-size: 20px;
      cursor: pointer;
    }
  }
}
</style>
